<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商店</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="main">
      <el-link style="font-size:18px" :underline="false" type="warning">Amazon</el-link>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="4" v-for="item in aList" :key="item.store_name">
          <el-card class="card">
            <div class="card-flex">
              <img :src="aImg" class="img" />
              <span>{{item.store_name}}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <br />
      <el-link style="font-size:18px" :underline="false" type="primary">E</el-link>
      <el-link style="font-size:18px" :underline="false" type="primary">b</el-link>
      <el-link style="font-size:18px" :underline="false" type="warning">a</el-link>
      <el-link style="font-size:18px" :underline="false" type="success">y</el-link>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="4" v-for="item in eList" :key="item.store_name">
          <el-card class="card">
            <div class="card-flex">
              <img :src="eImg" class="img" />
              <span>{{item.store_name}}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-button class="btn" icon="el-icon-plus" type="primary" @click="dialogVisible=true">添加商店</el-button>
    </div>

    <el-dialog title="添加新的商店" :visible.sync="dialogVisible" width="25.5%">
      <span>
        商店名称：
        <el-input
            style="width:20rem"
            v-model="store_name"
            placeholder="请输入商店名称."
        ></el-input>
      </span>
      <br />
      <br />

      <div class="radio">
        <span>
          商店类型：
          <el-radio v-model="plataeform_type" label="1">Amazon</el-radio>
          <el-radio v-model="plataeform_type" label="2">Ebay</el-radio>
        </span>
      </div>
      <br />

      <div class="radio">
        <span>
          商店状态：
          <el-radio v-model="store_sts_cd" label="0">出错</el-radio>
          <el-radio v-model="store_sts_cd" label="1">正常</el-radio>
          <el-radio v-model="store_sts_cd" label="2">关闭</el-radio>
        </span>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add">确定</el-button>
        <el-button @click="dialogVisible=false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      plataeform_type: "1",
      store_name: "",
      store_sts_cd: "1",
      dialogVisible: false,
      aImg: require("../../../assets/amazon.png"),
      eImg: require("../../../assets/ebay.png"),
      aList: [],
      eList: []
    };
  },
  mounted() {
    this.getStoreList();
  },
  methods: {
    getStoreList() {
      this.$post("/str/getStoreByUserID", {
        user_id: sessionStorage.getItem("user_id")
      }).then(res => {
        if (res.code == 504) {
          this.$message.warning(res.message);
          return;
        }
        if (res.code == 200) {
          console.log(res.data);
          this.aList = res.data.filter(e => e.plataeform_type == 1);
          this.eList = res.data.filter(e => e.plataeform_type == 2);
        }
      });
    },
    add() {
      this.$post("/str/addStore", {
        user_id: sessionStorage.getItem("user_id"),
        plataeform_type: this.plataeform_type,
        store_name: this.store_name,
        store_sts_cd: this.store_sts_cd
      }).then(res => {
        if (res.code == 504) {
          this.$message.warning(res.message);
          return;
        }
        if (res.code == 200) {
          this.$message.success("Successfully added new store!");
          this.getStoreList();
        }
      });

      this.dialogVisible = false;
      this.store_name = '';
    }
  }
};
</script>

<style scoped>
.main {
  margin-top: 2rem;
}
.card {
  margin-top: 0.8rem;
  width: 15rem;
  height: 15rem;
}
.img {
  width: 7rem;
  height: 7rem;
}
.card-flex {
  height: 13rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.btn {
  margin-top: 2rem;
  margin-left: 89rem;
}
.radio >>> .el-radio__input.is-checked .el-radio__inner {
  border-color: #1598ec;
  background: #1598ec;
}
.radio >>> .el-radio__input.is-checked + .el-radio__label {
  color: #1598ec;
}
</style>